<template>
  <div>
     <Wrap>
       <div slot="main_wrap">
         <div class="form-inline form-find ng-pristine ng-valid">
            <div class="form-group">
								<label>项目名称：</label>
						</div>
						<div class="form-group" style="min-width:200px">
              <!-- <avue-input-tree v-model="form2" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree> -->
              <el-select class="form-control " v-model="form2" :popper-append-to-body="false">
                  <el-option value="0" label="广东省税务局"><span>广东省税务局</span></el-option>
                </el-select>
            </div>
             <div class="form-group">
              <label>统计日期：</label>
              <div class="form-group-control">
                 <el-date-picker
                    v-model="params.startDate"
                    value-format="yyyy-MM-dd"
                    :type="typedate">
                  </el-date-picker>
              </div>
            </div>
             <div class="form-group">
              <label>至</label>
              <div class="form-group-control">
                 <el-date-picker
                    v-model="params.endDate"
                    value-format="yyyy-MM-dd"
                    :type="typedate">
                  </el-date-picker>
              </div>
            </div>
             <div class="form-group">
              <label>用能分类：</label>
              <div class="form-group-control">
                 <el-select v-model="params.energyUseType" class="form-control select-type" :popper-append-to-body="false">
                  <el-option v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
             <div class="form-group">
              <label>按用能时段：</label>
              <div class="form-group-control">
                <el-select v-model="select9" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="夜间白天能耗占比"><span>夜间白天能耗占比</span></el-option>
                  <!-- <el-option value="1" label="全部时段">全部时段</el-option>
                  <el-option value="2" label="夜间能耗趋势">夜间能耗趋势</el-option>
                  <el-option value="3" label="节假日能耗趋势">节假日能耗趋势</el-option>
                  <el-option value="4" label="午休能耗趋势">午休能耗趋势</el-option>
                  <el-option value="5" label="白天能耗趋势">白天能耗趋势</el-option>
                  <el-option value="6" label="工作时段趋势">工作时段趋势</el-option> -->
                </el-select>
              </div>
            </div>
            <div class="form-group">
              <a class="btn btn-primary btn-sm" role="button" @click="getData">查询</a>
              <a class="btn btn-sm btn-primary" role="button"@click="goUrl">总体用能趋势</a>
            </div>
         </div>
         <div class="proport-content">
           <!-- <table class="table table-condensed table-striped table-bordered three-table">
            <thead>
              <tr>
                <th colspan="4" class="body-head-title">
                  <span>按用能区域占比</span>
                </th>
              </tr>
              <tr>
                  <th class="ng-binding">序号</th>
                  <th class="ng-binding">区域名称</th>
                  <th class="ng-binding">用能量（kwh）</th>
                  <th class="ng-binding">占比</th>
              </tr>
            </thead>
            <tbody>
              <tr  class="ng-scope" v-for="(item, index) in regionChart">
                  <td class="ng-binding">{{index + 1}}</td>
                  <td class="ng-binding">{{item.name}}</td>
                  <td class="ng-binding">{{item.value}}</td>
                  <td class="ng-binding">{{item.ratio}}%</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
               <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
               <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
               <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
               <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">总用能(kwh)</td>
                  <td class="ng-binding">{{sprojectChart}}</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
            </tbody> 
          </table> -->
          <table class="table table-condensed table-striped table-bordered three-table">
            <thead>
              <tr>
                <th colspan="4" class="body-head-title">
                  <span>按用能分项占比</span>
                </th>
              </tr>
              <tr>
                  <th class="ng-binding">序号</th>
                  <th class="ng-binding">分项</th>
                  <th class="ng-binding">用能量（{{unit}}）</th>
                  <th class="ng-binding">占比</th>
              </tr>
            </thead>
            <tbody>
               <tr  class="ng-scope" v-for="(item, index) in projectChart">
                  <td class="ng-binding">{{index + 1}}</td>
                  <td class="ng-binding">{{item.name}}</td>
                  <td class="ng-binding">{{item.value}}</td>
                  <td class="ng-binding">{{item.newRatio}}%</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">总用能({{unit}})</td>
                  <td class="ng-binding">{{sregionChart}}</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
            </tbody> 
          </table>
          <table class="table table-condensed table-striped table-bordered three-table">
            <thead>
              <tr>
                <th colspan="4" class="body-head-title">
                  <span>按用能时段占比</span>
                </th>
              </tr>
             <tr>
                  <th class="ng-binding">序号</th>
                  <th class="ng-binding">用能时段</th>
                  <th class="ng-binding">用能量（{{unit}}）</th>
                  <th class="ng-binding">占比</th>
              </tr>
            </thead>
            <tbody>
               <tr  class="ng-scope" v-for="(item, index) in timeChart">
                  <td class="ng-binding">{{index + 1}}</td>
                  <td class="ng-binding">{{item.name}}</td>
                  <td class="ng-binding">{{item.value}}</td>
                  <td class="ng-binding">{{item.newRatio}}%</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding"> </td>
                  <td class="ng-binding"> </td>
                  <td class="ng-binding"> </td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding">&nbsp;</td>
                  <td class="ng-binding">总用能({{unit}})</td>
                  <td class="ng-binding">{{stimeChart}}</td>
                  <td class="ng-binding">&nbsp;</td>
              </tr>
            </tbody> 
          </table>
          <!-- <div class="chart-border">
              <v-chart :options="chartParams1" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                  
          </div> -->
          <div class="chart-border-right chart-border">
              <v-chart :options="chartParams2" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                    
          </div>
          <div class="chart-border-right chart-border">
              <v-chart :options="chartParams3" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                    
          </div>
          <div style="clear: both"></div>
         </div>
       </div>
     </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import {getCurrentDate} from '@/util/date'
import {accMul, accAdd} from '@/util/util'
import { remote } from "@/api/admin/dict";
import { energyUseRateAnalyse } from '@/api/energy/energy'
const option1 = {
  color: ['#588dd5', '#639871', '#c05050', '#ffb980'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 10,
    align: 'left',
    textStyle:{
      color: '#fff'
    }
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      left: 0,
      top: 10,
      right: 80,
      data: [
        { value: 17690776, name: '特殊用电' },
        { value: 18351432, name: '照明插座用电' },
        { value: 24483229, name: '空调用电' },
        { value: 6560480, name: '动力用电' }
      ]
    }
  ]
}
const option2 = {
  color: ['#35c395', '#b56c03', '#5821c8', '#00bfbc', '#0063bf', '#03bf4e', '#0081f4', '#1e72da', '#9757ee', '#dc69aa', '#07a2a4'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    left: 'left',
    top: 10,
    width: 100,
    bottom: 0,
    align: 'left',
    textStyle:{
      color: '#fff'
    }
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      left:'30%',
      top: 10,
      bottom: 0,
      data: [
        { value: 17690776, name: '特殊用电' },
        { value: 18351432, name: '照明插座用电' },
        { value: 24483229, name: '空调用电' },
        { value: 6560480, name: '动力用电' }
      ]
    }
  ]
}
const option3 = {
  color: ['#588dd5', '#639871', '#c05050', '#ffb980'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 10,
    align: 'left',
    textStyle:{
      color: '#fff'
    }
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      left: 0,
      top: 10,
      right: 80,
      data: [
        { value: 17690776, name: '特殊用电' },
        { value: 18351432, name: '照明插座用电' },
        { value: 24483229, name: '空调用电' },
        { value: 6560480, name: '动力用电' }
      ]
    }
  ]
}
export default {
  components: {
    Wrap
  },
  data () {
    return {
      form2:'0',
      unit: 'kwh',
      options: [],
      typedate: 'date',
      active: true,
      data1: '',
      data2: '',
      select2: '3',
      select1: '1',
      select3: '',
      select4: '',
      select5: '',
      select6: '',
      select7: '',
      select8: '',
      select9: '1',
      projectChart: [],
      regionChart: [],
      timeChart: [],
      sprojectChart: '',
      sregionChart: '',
      stimeChart: '',
      params: {
        startDate: String(new Date().getFullYear()) + '-01-01',
        endDate: getCurrentDate('year'),
        energyUseType: '1'
      },
      chartParams1: {},
      chartParams2: {},
      chartParams3: {},
      dic:[{
          label:'广东省税务局',
          value:0,
          // children:[{
          //    label:'选项3',
          //    value:2
          // },{
          //    label:'选项4',
          //    value:3
          // }]
        // },{
        //   label:'选项2',
        //   value:1
        }]
    }
  },
  created() {
    this.getData()
    remote('energy_use_type').then(response => {
      this.options = response.data.data
    })
  },
  methods: {
    getData() {
      if (this.params.energyUseType == '1') {
       this.unit = 'kwh'
      } else if (this.params.energyUseType == '2') {
       this.unit = '吨'
      } else if (this.params.energyUseType == '3') {
       this.unit = 'Nm³'
      } else if (this.params.energyUseType == '4') {
       this.unit = 'L'
      }
      energyUseRateAnalyse(this.params).then(res => {
        res.data.data.projectChart && res.data.data.projectChart.map(item => {
          item.newRatio = accMul(item.ratio, 100, 0)
          item.value = Number(item.value).toFixed(2)
        })
        this.projectChart = res.data.data.projectChart
        // this.regionChart = res.data.data.regionChart
        res.data.data.timeChart && res.data.data.timeChart.map(item => {
          item.newRatio = accMul(item.ratio, 100, 0)
          item.value = Number(item.value).toFixed(2)
        })
        this.timeChart = res.data.data.timeChart
        let projectChartDta = res.data.data.projectChart.map(item => {
          return item.value
        })
        this.sregionChart = projectChartDta.length ? (projectChartDta.length === 1 ?projectChartDta[0] : projectChartDta.reduce((pre, cur) => {
          return accAdd(pre, cur)
        }).toFixed(2)) : ''
        // let regionChartDta = res.data.data.regionChart.map(item => {
        //   return item.value
        // })
        // this.sprojectChart = regionChartDta.reduce((pre, cur) => {
        //   return accAdd(pre, cur)
        // })
        let timeChartDta = res.data.data.timeChart.map(item => {
          return item.value
        })
        this.stimeChart = timeChartDta.length ? (timeChartDta.length === 1 ? timeChartDta[0] : timeChartDta.reduce((pre, cur) => {
          return accAdd(pre, cur)
        }).toFixed(2)) : ''
        option1.series[0].data = res.data.data.regionChart
        this.chartParams1 = Object.assign({}, option1)
        option2.series[0].data = res.data.data.projectChart
        this.chartParams2 = Object.assign({}, option2)
        option3.series[0].data = res.data.data.timeChart
        this.chartParams3 = Object.assign({}, option3)
      })
    },
    goUrl() {
      this.$router.push({
        path: '/energy/carbonEgy/compare'
      })
    },
    changeDateType(value) {
      if (value == '1' || value == '2') {
        this.typedate = 'date'
      } else if(value == '3') {
        this.typedate = 'month'
      } else if(value == '4') {
        this.typedate = 'year'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.three-table{
  width: 49.5%;
  float: left;
  &:nth-child(1) {
    margin-right: 1%;
  }
  // &:nth-child(2) {
  //   margin-right: 0.5%;
  // }
}
.proport-content{
  .chart-border{
    width: 49.5%;
    float: left;
    height: 340px;
    margin-bottom: 10px;
    &:nth-child(3) {
      margin-right: 1%;
    }
    // &:nth-child(5) {
    //   margin-right: 0.5%;
    // }
  }
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border: 1px solid rgb(10, 57, 98);
}
.form-find {
    padding: 20px;
    background-color: #081325;
    box-shadow: inset 0px 1px 13px 0px #1AABF3;
    border: solid 1px rgba(15, 80, 111, 0.55);
    margin-bottom: 10px;
   .form-group {
        margin-right: 3px;
        margin-bottom: 3px;
    }
}
.reading-row {
    line-height: 25px;
    margin-right: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #0a91ef;
    overflow: hidden;
    .el-icon-circle-check {
      color: green;
    }
    .icon {
        font-size: 23px;
        vertical-align: middle;
    }
}
.outline-border {
    border: 1px solid #ddd;
    color:#fff;
    padding: 5px;
    .total-count {
        color: #0371F7;
        text-decoration: underline;
        font-weight: bold;
    }
    .abnormal-rate {
        color: red;
        font-weight: bold;
    }
}
.list-content{
  height: 475px;
  overflow-y: auto;
  margin-top: 10px;
  .device-reading {
    float: left;
  }
}
.form-inline label {
    margin-right: 7px;
}
.form-group-control {
    display: inline-block;
    vertical-align: middle;
}
.nav-tabs {
    margin-bottom: 15px;
    &>li.active,&>li:hover {
      background-color: transparent;
    }
}
@media (min-width: 768px){
  .form-inline .form-group {
      display: inline-block;
      vertical-align: middle;
  }
}
</style>
